@extends('backend.layouts.app')

@section('content')
<div class="layui-card">
    <div class="layui-card-header layui-card-header-auto">会员列表</div>
    <div class="layui-card-body">
        <div class="layui-row" style="margin-bottom:10px;">
            <div class="layui-form">
                <div class="layui-input-inline">
                    <input type="text" id="key" class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <button class="layui-btn layui-btn-sm" onclick="search()">搜索</button>
                </div>
            </div>
        </div>
        <table id="dataTable" lay-filter="dataTable">
            <script type="text/html" id="options">
                <div class="layui-btn-group">
                    <a class="layui-btn layui-btn-sm" lay-event="show">查看</a>
                    {{-- <a class="layui-btn layui-btn-sm" lay-event="edit">编辑</a> --}}
                </div>
            </script>
        </table>
    </div>
</div>
@endsection

@section('script')
<script type="text/javascript">
    let dataTable;
    layui.use(['layer', 'form', 'table'], function () {
        let layer = layui.layer;
        let form = layui.form;
        let table = layui.table;

        dataTable = table.render({
            elem: '#dataTable',
            url: "{{route('admin.business.member.list')}}",
            page: true,
            cols: [
                [{
                    type: 'numbers',
                    fixed: true
                }, {
                    title: 'ID',
                    field: 'id',
                    width: 80
                }, {
                    title: '姓名',
                    field: 'true_name',
                    width: 100
                }, {
                    title: '昵称',
                    field: 'nickname',
                    width: 100
                }, {
                    title: '性别',
                    field: 'gender',
                    width: 60
                }, {
                    title: '手机',
                    field: 'contact_phone'
                }, {
                    title: '邮箱',
                    field: 'email'
                }, {
                    title: '学校',
                    field: 'school'
                }, {
                    title: '专业',
                    field: 'major'
                }, {
                    title: '年级',
                    field: 'grade',
                    width: 60
                }, {
                    title: '头像',
                    field: 'avatar',
                    width: 80,
                    templet: function (res) {
                        return '<img src="' + res.avatar + '" width="30">'
                    }
                }, {
                    title: '状态',
                    width: 80,
                    field: 'status',
                    templet: function (res) {
                        if (res.status == 0) {
                            return '<span class="label layui-bg-green" style="padding:5px;font-size:10px">正常</span>';
                        }
                        return '<span class="label layui-bg-red" style="padding:5px;font-size:10px">停用</span>'
                    }
                }, {
                    title: '注册时间',
                    field: 'created_at'
                }, {
                    title: '操作',
                    fixed: 'right',
                    align: 'center',
                    toolbar: '#options'
                }]
            ]
        });

        table.on('tool(dataTable)', function (obj) {
            let data = obj.data;
            let layEvent = obj.event;

            switch (layEvent) {
                case 'show':
                    location.href = 'member/' + data.id + '/show';
                    break;
                    // case 'edit':
                    //     location.href = 'member/' + data.id + '/edit';
                    //     break;
                default:
                    break;
            }
        });
    });

    function search() {
        dataTable.reload({
            where: {
                key: $("#key").val()
            },
            page: {
                curr: 1
            }
        });
    }

</script>
@endsection